<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet"
          href="resource/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="resource/css/login.css">
    <!-- <script type="text/javascript" src="resource/jquery/jquery-1.12.2.js"></script> -->
    <!-- <script type="text/javascript" src="resource/bootstrap/js/bootstrap.js"></script> -->
    <script type="text/javascript"
            src="resource/angular/angular.min.js"></script>
    <script type="text/javascript" src="resource/angular/ng-post.min.js"></script>
    <script type="text/javascript" src="resource/js/login.js"></script>
    <title>Sign in</title>
</head>
<body ng-app="loginModule">
<div class="container" ng-controller="loginController">
    <div class="panel panel-default login-panel">
        <div class="panel-body">
            <div class="login-title">
                <h2>FBase</h2>
            </div>
            <form class="form-horizontal" name="loginform">
                <div class="form-group">
                    <label class="col-sm-4 control-label">Username</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" name="username"
                               required="required" ng-model="vm.user.username"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">Password</label>
                    <div class="col-sm-5">
                        <input type="password" class="form-control" required="required"
                               name="password" ng-model="vm.user.password"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">Code</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" required="required"
                               name="captcha" ng-model="vm.user.captcha"/>
                    </div>
                    <div class="col-sm-3" style="padding-left: 0px;">
                        <img ng-src="{{vm.verifyImg}}" class="img-validate"
                             ng-click="vm.refrashImg()">
                    </div>
                </div>
                <div class="form-group form-group-sm"
                     ng-show="loginform.$invalid && vm.user.$showError">
                    <div class="col-sm-8 col-sm-offset-4 text-danger">
                        <p ng-show="loginform.username.$error.required">Username is
                            required!</p>
                        <p ng-show="loginform.password.$error.required">Password is
                            required!</p>
                        <p ng-show="loginform.captcha.$error.required">Verification
                            code is required!</p>
                    </div>
                </div>
                <div class="form-group" ng-show="vm.user.$showMessage">
                    <div class="col-sm-8 col-sm-offset-4  text-danger">
                        <p>{{vm.user.$message}}</p>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-5">
                        <button type="submit" class="btn btn-primary"
                                ng-click="vm.login(loginform)">Sign in
                        </button>
                        <button type="reset" class="btn btn-default"
                                ng-click="vm.user = {}">Reset
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

</html>